<script setup>
import { useAuthStore} from '@/store/auth';
import router from '@/router'
const authStore = useAuthStore()

const logout = () => {
    authStore.logout()
    location.href = '/login'
}

const mesg = () => {
    router.push({ path: "/mesg", query: { id: authStore.user.id } });
}

</script>

<template>
    <div style="height: 50px;line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
        <div style="width: 200px;  padding-left: 30px; font-weight: bold; color: dodgerblue">个人博客系统后台</div>
        <div style="flex:1"></div>
        <div style="width: 140px">
            <el-dropdown style="margin-top: 20px;">
                <span class="el-dropdown-link">
                    欢迎，{{ authStore.user.name}}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="mesg">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

</template>

<style scoped></style>
